<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Smart Mapping Table Join</title>

<link rel="stylesheet" href="//js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="//js.arcgis.com/3.16/esri/css/esri.css">

<style>

html, body, #map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#legend .esriLegendServiceLabel {
  display: none;
}

.ancestry-select-container {
  position: absolute;
  padding: 10px 10px;
  top: 20px;
  right: 20px;
  width: 200px;
  background: white;
  border-radius: 10px;
  border: black solid 1px;
}

</style>

<script src="//js.arcgis.com/3.16/"></script>

<script>
require([
  "esri/dijit/Legend",
  "esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/map",
  "dojo/domReady!"
], function (
   Legend, ArcGISDynamicMapServiceLayer, Map
){

  /////////////////////////////////////////////////////////////
  //
  // Create the map and add a dynamic layer to it.
  //
  /////////////////////////////////////////////////////////////

  var map = new Map("map", {
    basemap: "gray",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
    center: [-99.12, 38.79], // longitude, latitude
    zoom: 4
  });

  var layerUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";
  var censusMapServiceLayer = new ArcGISDynamicMapServiceLayer(layerUrl, {
    opacity: 0.8
  });
  map.addLayer(censusMapServiceLayer);

  censusMapServiceLayer.on("load", function (event){
    var legendDijit = new Legend({
      map: map,
      layerInfos: [{ layer: censusMapServiceLayer }]
    }, "legend");
    legendDijit.startup();
  });

});
</script>

</head>

<body class="claro">
  <div id="map"></div>
  <div class="ancestry-select-container">
    <div id="legend"></div>
  </div>
</body>
</html>
